<template>
  <div class="menu-content zb-index">
    <div class="left">
      <p class="right-title">数据处理过程清单</p>
      <div style="margin: 20px 0;display: flex;justify-content: space-between;">
        <div class="param-del" @click="deleteProc" style="margin: 0;"><a>删除</a></div>
        <div style="display: flex;height:30px;">
          <div style="margin-right: 20px;">
            <w-select v-model="typeName" placeholder="请选择" @change="searchChange">
              <w-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.name">
              </w-option>
            </w-select>
          </div>
          <w-input style="width:60%;margin-right: 20px;" placeholder="存储过程" v-model="searchName"></w-input>
          <w-button type="primary" @click="procSearch">查询</w-button>
        </div>
      </div>
      <w-table border :max-height="tableHeight" style="width: 100%" ref="multiTable" :data="tableData" @cell-click="editable"
        highlight-current-row @selection-change="handleSelectionChange">
        <w-table-column type="selection" width="50" :selectable="selectable">
        </w-table-column>
        <w-table-column prop="name" label="存储过程">
          <template slot-scope="{row,$index}">
            <div class="input-box" v-if="showName[$index]">
              <w-input size="small" @change="!row.add&&changeName(row)" v-model="row.name"></w-input>
            </div>
            <span v-if="!showName[$index]">{{row.name}}</span>
          </template>
        </w-table-column>
        <w-table-column prop="themeTableId" label="对应模型">
          <template slot-scope="{row,$index}">
            <div class="input-box" v-if="showThemeTableId[$index]">
              <w-select v-model="row.tableCode" filterable placeholder="请选择" @blur="searchBlur" @change="!row.add&&modelChange(row)">
                <w-option v-for="item in modelOptions" :key="item.id" :label="item.code" :value="item.code">
                </w-option>
              </w-select>
            </div>
            <span v-if="!showThemeTableId[$index]">{{row.tableCode}}</span>
          </template>
        </w-table-column>
        <w-table-column prop="operator" label="作者">
          <!-- <template slot-scope="{row,$index}">
            <div class="input-box" v-if="showOperator[$index]">
              <w-input size="small" @change="!row.add&&changeName(row)" v-model="row.operator"></w-input>
            </div>
            <span v-if="!showOperator[$index]">{{row.operator}}</span>
          </template> -->
        </w-table-column>
        <w-table-column prop="operateTime" label="更新日期">
        </w-table-column>
        <w-table-column prop="operator" label="操作">
          <template slot-scope="{row,$index}">
            <a title="编辑" v-if="!row.add" class="edit" @click="openDrawer(row)"><i class="w-icon-edit-solid"></i></a>
            <a title="详情" v-if="!row.add" class="detail" @click="editStep(row)"><i class="w-icon-list"></i></a>
            <a title="删除" v-if="!row.add" class="reduce" @click="reduce(row)"><i class="w-icon-delete"></i></a>
            <a title="添加" v-if="row.add" class="add" @click="add(row)"><i class="w-icon-plus"></i></a>
          </template>
        </w-table-column>
      </w-table>
    </div>

    <w-drawer position="right" :visible.sync="visible" @onClose="handleClose">
      <div class="content-container right">
        <!-- slot -->
        <p class="right-title">数据处理过程信息</p>
        <div class="clearfix" style="margin: 20px 0;" v-if="tableInfo">
          <div class="key-value">
            <span class="right-key">代码过程</span>
            <w-input class="right-value" @change="changeParamData(tableInfo)" v-model="tableInfo.name"></w-input>
          </div>
          <div class="key-value">
            <span class="right-key">开发作者</span>
            <w-input disabled class="right-value" @change="changeParamData(tableInfo)" v-model="tableInfo.operator"></w-input>
          </div>
          <div class="key-value">
            <span class="right-key">过程名称</span>
            <w-input class="right-value" @change="changeParamData(tableInfo)" v-model="tableInfo.description"></w-input>
          </div>
          <div class="key-value">
            <span class="right-key">对应版本</span>
            <w-input class="right-value" @change="changeParamData(tableInfo)" v-model="tableInfo.versionNo"></w-input>
          </div>
          <div class="key-value">
            <span class="right-key">过程版权</span>
            <w-input class="right-value" @change="changeParamData(tableInfo)" v-model="tableInfo.copyright"></w-input>
          </div>
          <div class="key-value">
            <span class="right-key">更新时间</span>
            <w-input disabled class="right-value" @change="changeParamData(tableInfo)" v-model="tableInfo.operateTime"></w-input>
          </div>
          <div class="key-value">
            <span class="right-key">所属类别</span>
            <w-select v-model="tableInfo.procTypeName" placeholder="请选择" @change="typeChange(tableInfo)">
              <w-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.name">
              </w-option>
            </w-select>
          </div>
          <div class="key-value">
            <span class="right-key">对应模型</span>
            <w-select v-model="tableInfo.tableCode" placeholder="请选择" @change="modelChange(tableInfo)">
              <w-option v-for="item in modelOptions" :key="item.id" :label="item.code" :value="item.code">
              </w-option>
            </w-select>
          </div>
          <div class="key-value last-key-value">
            <span class="right-key">功能描述</span>
            <w-input class="right-value" @change="changeParamData(tableInfo)" v-model="tableInfo.funDescription"></w-input>
          </div>
        </div>
        <div class="param-del" style="margin-top: 45px;" @click="deletaParam"><a>删除</a></div>
        <w-table border :max-height="divHeight" ref="multiTable1" :data="tableData1" @cell-click="paramedit"
          @selection-change="handleSelectionChange1">
          <w-table-column type="selection" width="50" :selectable="selectable1">
          </w-table-column>
          <w-table-column prop="parameterName" label="参数名称">
            <template slot-scope="{row,$index}">
              <div class="input-box" v-if="showParameterName[$index]">
                <w-input size="small" @change="!row.add&&changeParam(row)" v-model="row.parameterName"></w-input>
              </div>
              <span v-if="!showParameterName[$index]">{{row.parameterName}}</span>
            </template>
          </w-table-column>
          <w-table-column prop="memo" label="说明">
            <template slot-scope="{row,$index}">
              <div class="input-box" v-if="showMemo[$index]">
                <w-input size="small" @change="!row.add&&changeParam(row)" v-model="row.memo"></w-input>
              </div>
              <span v-if="!showMemo[$index]">{{row.memo}}</span>
            </template>
          </w-table-column>
          <w-table-column prop="parameterType" label="数据类型">
            <template slot-scope="{row,$index}">
              <div class="input-box" v-if="showParameterType[$index]">
                <w-select v-model="row.parameterTypeName" placeholder="请选择" @change="!row.add&&dataChange(row)">
                  <w-option v-for="item in dataOptions" :key="item.id" :label="item.value" :value="item.value">
                  </w-option>
                </w-select>
              </div>
              <span v-if="!showParameterType[$index]">{{row.parameterTypeName}}</span>
            </template>
          </w-table-column>
          <w-table-column prop="parameterLen" label="长度" width="100">
            <template slot-scope="{row,$index}">
              <div class="input-box" v-if="showParameterLen[$index]">
                <w-input size="small" @change="!row.add&&changeParam(row)" v-model="row.parameterLen"></w-input>
              </div>
              <span v-if="!showParameterLen[$index]">{{row.parameterLen}}</span>
            </template>
          </w-table-column>
          <w-table-column prop="defaultValue" label="默认值">
            <template slot-scope="{row,$index}">
              <div class="input-box" v-if="showDefaultValue[$index]">
                <w-input size="small" @change="!row.add&&changeParam(row)" v-model="row.defaultValue"></w-input>
              </div>
              <span v-if="!showDefaultValue[$index]">{{row.defaultValue}}</span>
            </template>
          </w-table-column>
          <w-table-column prop="operator" label="操作">
            <template slot-scope="{row,$index}">
              <a title="删除" v-if="!row.add" class="reduce" @click="reduce1(row)"><i class="w-icon-delete"></i></a>
              <a title="添加" v-if="row.add" class="add" @click="add1(row)"><i class="w-icon-plus"></i></a>
            </template>
          </w-table-column>
        </w-table>
        <div class="button-wrap">
          <w-button type="primary" @click="goSql(procId)">SQL预览</w-button>
          <w-button type="primary" @click="goPreview">执行预览</w-button>
        </div>
      </div>
    </w-drawer>
  </div>
</template>
<script>
  import {
    getCurrentMonth
  } from '@/utils/index.js'
  export default {
    data() {
      return {
        loading: true,
        tableHeight: document.documentElement.clientHeight - 230,
        divHeight: document.documentElement.clientHeight - 400,
        visible: false,
        showName: [], //显示编辑框
        showThemeTableId: [], //显示编辑框
        showOperator: [],
        showOperateTime: [],
        showParameterName: [],
        showMemo: [],
        showParameterType: [],
        showParameterLen: [],
        showDefaultValue: [],
        tableInfo: {},
        tableData: [],
        tableData1: [],
        options: [{
          value: '1',
          label: 'date'
        }],
        typeOptions: [],
        modelOptions: [],
        dataOptions: [],
        typeValue: '',
        typeName: '',
        procId: this.$route.query.procId?this.$route.query.procId:'',
        selection: [],
        selection1: [],
        isEdit: false,
        procType: '',
        searchName: '',
        procName: '',
        dateValue:'',
        isSql: this.$route.query.isSql,
      };
    },
    mounted() {

    },
    created() {
      this.getTableData()
      this.getModelData()
      this.getTypeData()
      this.getData()
      this.dateValue = getCurrentMonth()
      if(this.isSql){
        this.openDrawer({id:this.procId,add:false})
      }
    },
    methods: {
      searchBlur(val) {

      },
      //查询
      procSearch() {
        this.getTableData()
      },
      searchChange(val) {
        this.typeOptions.map((i, k) => {
          if (i.name == val) {
            this.procType = i.id
            this.typeValue = i.value
          }
        })
        this.getModelData()
        this.getTableData()
      },
      openDrawer(row) {
        this.visible = true
        this.setShowEditInit()
        this.rowClick(row)
        // this.getModelData()
        // this.getTypeData()
      },
      handleClose() {
        this.visible = false
      },
      selectable(row, index) {
        if (!row.add) {
          return true
        } else {
          return false
        }
      },
      //多个删除存储
      deleteProc() {
        if (this.selection.length == 0) {
          this.$message.error('请至少勾选一个需要删除的存储~')
        } else {
          this.$confirm('确认删除存储吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            var arr = []
            this.selection.map((item, index) => {
              arr.push(item.id)
            })
            let param = arr.join(',')
            this.$Http
              .get("etlProdInfo/deleteByBatch/" + param)
              .then(response => {
                if (response.data.response.code == "1") {
                  this.$message.success('删除成功~')
                  this.getTableData()
                } else {
                  if (response.data.response.msg) {
                    this.$message.error(response.data.response.msg)
                  }
                }
              })
              .catch(error => {
                console.log(error);
              });
          }).catch(() => {

          });
        }
      },
      handleSelectionChange(val) {
        this.selection = val
      },
      selectable1(row, index) {
        if (!row.add) {
          return true
        } else {
          return false
        }
      },
      handleSelectionChange1(val) {
        this.selection1 = val
      },
      //多个删除参数
      deletaParam() {
        if (this.selection1.length == 0) {
          this.$message.error('请至少勾选一个需要删除的存储参数~')
        } else {
          this.$confirm('确认删除存储参数吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            var arr = []
            this.selection1.map((item, index) => {
              arr.push(item.id)
            })
            let param = arr.join(',')
            this.$Http
              .get("etlProdParamInfo/deleteByBatch/" + param)
              .then(response => {
                if (response.data.response.code == "1") {
                  this.$message.success('删除成功~')
                  this.getParamData()
                } else {
                  if (response.data.response.msg) {
                    this.$message.error(response.data.response.msg)
                  }
                }
              })
              .catch(error => {
                console.log(error);
              });
          }).catch(() => {

          });
        }
      },
      //获取所属类别
      getTypeData() {
        let param = {
          typeCode: "TABLE_TYPE"
        }
        this.$Http
          .post("tableDicInfo/findTableDicInfo", param)
          .then(response => {
            if (response.data.response.code == "1") {
              let content = response.data.response.data;
              content.unshift({
                id: '',
                value: '',
                name: '全部'
              })
              this.typeOptions = content
              if (content.length > 0) {
                this.typeName = content[0].name
                this.typeValue = content[0].value
              }
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      //获取数据类型
      getData() {
        let param = {
          typeCode: "ZDSJLX"
        }
        this.$Http
          .post("tableDicInfo/findTableDicInfo", param)
          .then(response => {
            if (response.data.response.code == "1") {
              let content = response.data.response.data;
              this.dataOptions = content
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      //点击编辑跳转到步骤页面
      editStep(row) {
        this.$router.push({
          name: 'stepList',
          query: {
            procId: row.id,
            name: row.name
          }
        });
      },
      //修改所属类别
      typeChange(row) {
        var procType = ''
        this.typeOptions.map((i, k) => {
          if (i.name == row.procTypeName) {
            procType = i.id
            this.typeValue = i.value
          }
        })
        row.procType = procType
        this.isEdit = true
        this.tableInfo.tableCode = ''
        this.getModelData()
        // this.editTableData(row)
      },
      //修改数据类型
      dataChange(row) {
        var parameterType = ''
        this.dataOptions.map((i, k) => {
          if (i.value == row.parameterTypeName) {
            parameterType = i.id
          }
        })
        row.parameterType = parameterType
        this.editParamData(row)
      },
      //修改对应模型
      modelChange(row) {
        var themeTableId = ''
        this.modelOptions.map((i, k) => {
          if (i.code == row.tableCode) {
            themeTableId = i.id
          }
        })
        row.themeTableId = themeTableId
        this.isEdit = true
        this.editTableData(row)
      },
      //获取对应模型数据
      getModelData() {
        let param = {
          tableType: this.typeValue
        }
        this.$Http
          .post("tableList/findtableListInfo", param)
          .then(response => {
            if (response.data.response.code == "1") {
              let content = response.data.response.data;
              this.modelOptions = content
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      //获取左边表格数据
      getTableData() {
        let param = {
          id: '',
          procType: this.procType,
          name: this.searchName
        }
        this.$Http
          .post("etlProdInfo/findtableListInfo", param)
          .then(response => {
            if (response.data.response.code == "1") {
              // this.loading = false;
              let content = response.data.response.data;
              this.tableData = content
              if (!this.isEdit && content.length > 0) {
                if(!this.isSql){
                  this.procId = content[0].id
                  this.tableInfo = content[0]
                  this.tableInfo.procTypeName = content[0].procTypeName ? content[0].procTypeName : ''
                }
              }
              this.tableData.push({
                id: '',
                name: '',
                themeTableId: '',
                operator: '',
                operateTime: '',
                add: 'true'
              })
              this.getParamData()
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      //编辑表格数据
      editTableData(info) {
        let param = {
          "description": info.description ? info.description : '',
          "funDescription": info.funDescription ? info.funDescription : '',
          "copyright": info.copyright ? info.copyright : '',
          "id": info.id ? info.id : '',
          "name": info.name ? info.name : '',
          "operateTime": info.operateTime ? info.operateTime : '',
          "operator": info.operator ? info.operator : '',
          "themeTableId": info.themeTableId ? info.themeTableId : '',
          "versionNo": info.versionNo ? info.versionNo : '',
          "sqlContext": info.sqlContext ? info.sqlContext : '',
          "status": info.status ? info.status : '',
          "procType": info.procType ? info.procType : ''
        }
        this.$Http
          .post("etlProdInfo/update", param)
          .then(response => {
            if (response.data.response.code == "1") {
              this.$message.success('编辑成功~')
              this.setShowEditInit()
              this.getTableData()
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      //获取参数表格数据
      getParamData() {
        let param = {
          procId: this.procId,
          parameterCategory: '0'
        }
        this.$Http
          .post("etlProdParamInfo/findtableListInfo", param)
          .then(response => {
            if (response.data.response.code == "1") {
              let content = response.data.response.data;
              this.tableData1 = content
              this.tableData1.push({
                parameterName: '',
                memo: '',
                parameterType: '',
                parameterLen: '',
                id: '',
                add: 'true'
              })
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      //编辑参数表格数据
      editParamData(info) {
        let param = {
          "memo": info.memo ? info.memo : '',
          "id": info.id ? info.id : '',
          "parameterLen": info.parameterLen ? info.parameterLen : '',
          "parameterName": info.parameterName ? info.parameterName : '',
          "parameterType": info.parameterType ? info.parameterType : '',
          "procId": this.procId,
          "defaultValue": info.defaultValue ? info.defaultValue : '',
        }
        this.$Http
          .post("etlProdParamInfo/update", param)
          .then(response => {
            if (response.data.response.code == "1") {
              this.$message.success('编辑成功~')
              this.setShowEditInit1()
              this.getParamData()
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      //跳转到执行预览页面
      goPreview() {
        this.$Http
          .post("etlProdInfo/executeProc", {
            id: this.procId,
            endTime: this.dateValue,
            startTime: this.dateValue,
          })
          .then(response => {
            this.$router.push({
              path: '/dataDetail'
            });
            // if (response.data.response.code == "1") {
            //   this.$message.success('编辑成功~')
            //   this.setShowEditInit1()
            //   this.getParamData()
            // } else {
            //   if (response.data.response.msg) {
            //     this.$message.error(response.data.response.msg)
            //   }
            // }
          })
          .catch(error => {
            console.log(error);
          });

      },
      //跳转到SQL预览页面
      goSql(procId) {
        this.$router.push({
          path: '/indexSql',
          query: {
            procId: procId
          }
        });
      },
      //点击表格每一行
      rowClick(row) {
        if (!row.add) {
          this.setShowEditInit()
          let param = {
            id: row.id
          }
          this.$Http
            .post("etlProdInfo/findtableListInfo", param)
            .then(response => {
              if (response.data.response.code == "1") {
                let content = response.data.response.data[0];
                this.tableInfo = content
                this.tableInfo.procTypeName = content.procTypeName ? content.procTypeName : '全部'
              } else {
                if (response.data.response.msg) {
                  this.$message.error(response.data.response.msg)
                }
              }
            })
            .catch(error => {
              console.log(error);
            });
          this.procId = row.id
          this.procName = row.name
          this.getParamData()
        }
      },
      // 初始化单元格显示状态
      setShowEditInit() {
        this.showName.map((item, index) => {
          this.showName[index] = false
        })
        this.showThemeTableId.map((item, index) => {
          this.showThemeTableId[index] = false
        })
        // this.showOperator.map((item, index) => {
        //   this.showOperator[index] = false
        // })
        this.showOperateTime.map((item, index) => {
          this.showOperateTime[index] = false
        })
      },
      // 初始化单元格显示状态
      setShowEditInit1() {
        this.showParameterName.map((item, index) => {
          this.showParameterName[index] = false
        })
        this.showMemo.map((item, index) => {
          this.showMemo[index] = false
        })
        this.showParameterType.map((item, index) => {
          this.showParameterType[index] = false
        })
        this.showParameterLen.map((item, index) => {
          this.showParameterLen[index] = false
        })
        this.showDefaultValue.map((item, index) => {
          this.showDefaultValue[index] = false
        })
      },
      //单击单元格事件
      editable(row, column, cell, event, index) {
        this.setShowEditInit()
        let nowObj = column.property
        var index = this.tableData.findIndex((item) => {
          return item.id === row.id
        })
        if (nowObj == 'name') {
          this.showName[index] = true
          this.$set(this.showName, index, true)
        } else if (nowObj == 'themeTableId') {
          this.showThemeTableId[index] = true
          this.$set(this.showThemeTableId, index, true)
        }
        // else if (nowObj == 'operator') {
        //   this.showOperator[index] = true
        //   this.$set(this.showOperator, index, true)
        // }
        else if (nowObj == 'operateTime') {
          this.showOperateTime[index] = true
          this.$set(this.showOperateTime, index, true)
        }
      },
      //单击单元格事件
      paramedit(row, column, cell, event, index) {
        this.setShowEditInit1()
        let nowObj = column.property
        var index = this.tableData1.findIndex((item) => {
          return item.id === row.id
        })
        if (nowObj == 'parameterName') {
          this.showParameterName[index] = true
          this.$set(this.showParameterName, index, true)
        } else if (nowObj == 'memo') {
          this.showMemo[index] = true
          this.$set(this.showMemo, index, true)
        } else if (nowObj == 'parameterType') {
          this.showParameterType[index] = true
          this.$set(this.showParameterType, index, true)
        } else if (nowObj == 'parameterLen') {
          this.showParameterLen[index] = true
          this.$set(this.showParameterLen, index, true)
        } else if (nowObj == 'defaultValue') {
          this.showDefaultValue[index] = true
          this.$set(this.showDefaultValue, index, true)
        }
      },
      changeName(row) {
        this.editTableData(row)
      },
      changeParamData(row) {
        this.isEdit = true
        this.editTableData(row)
      },
      changeParam(row) {
        this.editParamData(row)
      },
      //点击添加存储
      add(row) {
        if (!row.name) {
          this.$message.error('请输入存储过程')
        } else if (!row.tableCode) {
          this.$message.error('请选择对应模型')
        }
        // else if (!row.operator) {
        //   this.$message.error('请输入作者')
        // }
        else {
          var id = ''
          this.modelOptions.map((item, index) => {
            if (item.code == row.tableCode) {
              id = item.id
            }
          })
          let param = {
            id: '',
            procType: this.procType,
            name: row.name,
            themeTableId: id,
            operator: row.operator,
            operateTime: row.operateTime,
          }
          this.$Http
            .post("etlProdInfo/save", param)
            .then(response => {
              if (response.data.response.code == "1") {
                this.$message.success('新增成功~')
                this.setShowEditInit()
                this.getTableData()
              } else {
                if (response.data.response.msg) {
                  this.$message.error(response.data.response.msg)
                }
              }
            })
            .catch(error => {
              console.log(error);
            });
        }
      },
      //点击删除存储
      reduce(row) {
        this.$confirm('确认删除此条存储吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$Http
            .get("etlProdInfo/delete/" + row.id)
            .then(response => {
              if (response.data.response.code == "1") {
                this.$message.success('删除成功~')
                this.setShowEditInit()
                this.getTableData()
              } else {
                if (response.data.response.msg) {
                  this.$message.error(response.data.response.msg)
                }
              }
            })
            .catch(error => {
              console.log(error);
            });
        }).catch(() => {

        });
      },
      add1(row) {
        if (!row.parameterName) {
          this.$message.error('请输入参数名称')
        } else if (!row.memo) {
          this.$message.error('请输入说明')
        } else if (!row.parameterTypeName) {
          this.$message.error('请选择数据类型')
        } else if (!row.parameterLen) {
          this.$message.error('请输入长度')
        } else if (!row.defaultValue) {
          this.$message.error('请输入默认值')
        } else {
          var parameterType = ''
          this.dataOptions.map((item, index) => {
            if (item.value == row.parameterTypeName) {
              parameterType = item.id
            }
          })
          let param = {
            id: '',
            procId: this.procId,
            procName: this.procName,
            parameterName: row.parameterName,
            memo: row.memo,
            parameterType: parameterType,
            parameterLen: row.parameterLen,
            parameterCategory: '0',
            defaultValue: row.defaultValue
          }
          this.$Http
            .post("etlProdParamInfo/save", param)
            .then(response => {
              if (response.data.response.code == "1") {
                this.$message.success('新增成功~')
                this.setShowEditInit1()
                this.getParamData()
              } else {
                if (response.data.response.msg) {
                  this.$message.error(response.data.response.msg)
                }
              }
            })
            .catch(error => {
              console.log(error);
            });
        }
      },
      reduce1(row) {
        this.$confirm('确认删除此条参数吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$Http
            .get("etlProdParamInfo/delete/" + row.id)
            .then(response => {
              if (response.data.response.code == "1") {
                this.$message.success('删除成功~')
                this.setShowEditInit1()
                this.getParamData()
              } else {
                if (response.data.response.msg) {
                  this.$message.error(response.data.response.msg)
                }
              }
            })
            .catch(error => {
              console.log(error);
            });
        }).catch(() => {

        });
      }
    }
  };
</script>

<style scoped lang="scss">
  .zb-index {
    display: flex;
    padding: 10px;
    box-sizing: border-box;

    .left,
    .right {
      flex: 1;
    }

    .edit {
      color: #1846BC
    }

    .right {
      padding: 20px;
      box-sizing: border-box;

      .key-value {
        border-radius: 3px;
        margin-top: 10px;
        width: 49%;
        margin-right: 2%;
        display: inline-block;
        float: left;
      }

      .key-value:nth-child(2n) {
        margin-right: 0;
      }

      .right-key {
        font-size: 14px;
        padding: 10px;
        color: #000622;
        box-sizing: border-box;
        width: 20%;
      }

      .right-value {
        width: 80%;
        background: #F3F5F9;
      }

      .last-key-value {
        width: 100%;

        .right-value {
          width: 90%;
        }
      }
    }

    .content-container {
      width: 945px;
    }

    .button-wrap {
      margin-top: 30px;
      text-align: right;
    }
  }
</style>
